<template>
  <div>
    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
      <div slot="footer"><b>ant design vue</b> footer part</div>
      <a-list-item slot="renderItem" key="item.title" slot-scope="item">
        <template v-for="{ type, text } in actions" slot="actions">
          <span :key="type">
            <a-icon :type="type" style="margin-right: 8px" />
            {{ text }}
          </span>
        </template>
        <img slot="extra" width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
        <a-list-item-meta :description="item.description">
          <a slot="title" :href="item.href">{{ item.title }}</a>
          <a-avatar slot="avatar" :src="item.avatar" />
        </a-list-item-meta>
        {{ item.content }}
      </a-list-item>
    </a-list>

    <br />
    <a-popover placement="topLeft">
      <template slot="content">
        <p>Content</p>
        <p>Content</p>
      </template>
      <span slot="title">Title</span>
      <a-button>Align edge / 边缘对齐</a-button>
    </a-popover>
    <br />
    <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
    <br />
    <a-statistic title="Feedback" :value="1128" style="margin-right: 50px">
      <template #suffix>
        <a-icon type="like" />
      </template>
    </a-statistic>
    <br />
    <a-card>
      <a-statistic title="Feedback" :value="11.28" :precision="2" suffix="%" :value-style="{ color: '#3f8600' }" style="margin-right: 50px">
        <template #prefix>
          <a-icon type="arrow-up" />
        </template>
      </a-statistic>
    </a-card>
    <br />
    <div>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="Tab 1">
          Content of Tab Pane 1
        </a-tab-pane>
        <a-tab-pane key="2" tab="Tab 2" force-render>
          Content of Tab Pane 2
        </a-tab-pane>
        <a-tab-pane key="3" tab="Tab 3">
          Content of Tab Pane 3
        </a-tab-pane>
      </a-tabs>
    </div>
    <br />
    <div>
      <h4 style="margin-bottom: 16px">
        Presets:
      </h4>
      <div>
        <a-tag color="pink">
          pink
        </a-tag>
        <a-tag color="red">
          red
        </a-tag>
        <a-tag color="orange">
          orange
        </a-tag>
        <a-tag color="green">
          green
        </a-tag>
        <a-tag color="cyan">
          cyan
        </a-tag>
        <a-tag color="blue">
          blue
        </a-tag>
        <a-tag color="purple">
          purple
        </a-tag>
      </div>
      <h4 style="margin: '16px 0'">
        Custom:
      </h4>
      <div>
        <a-tag color="#f50">
          #f50
        </a-tag>
        <a-tag color="#2db7f5">
          #2db7f5
        </a-tag>
        <a-tag color="#87d068">
          #87d068
        </a-tag>
        <a-tag color="#108ee9">
          #108ee9
        </a-tag>
      </div>
    </div>
    <br />
    <div>
      <a-alert message="Success Text" type="success">
        <p slot="description">
          Success Description <span style="color: red">Success</span> Description Success Description
        </p>
      </a-alert>
      <a-alert message="Info Text" description="Info Description Info Description Info Description Info Description" type="info" />
      <a-alert message="Warning Text" description="Warning Description Warning Description Warning Description Warning Description" type="warning" />
      <a-alert message="Error Text" description="Error Description Error Description Error Description Error Description" type="error" />
    </div>
    <a-alert message="Error Text" description="Error Description Error Description Error Description Error Description Error Description Error Description" type="error" closable />

  </div>
</template>
<script>
const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `ant design vue part ${i}`,
    avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    description:
      "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content:
      "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."
  });
}

export default {
  data() {
      
 this.$message.success('This is a success message');
   this.$message.error('This is an error message');
    this.$message.warning('This is a warning message');
    return {
      listData,
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 3
      },
      actions: [
        { type: "star-o", text: "156" },
        { type: "like-o", text: "156" },
        { type: "message", text: "2" }
      ]
    };
  }
};
</script>
<style></style>
